<template>
	<view class="indexContainer">
		<!-- 头部 -->
		<view class="header">
			<image class="logo" src="../../static/images/logo.png" mode=""></image>
			<view class="search">
				<text class="iconfont icon-sousuo"></text>
				<input type="text" placeholder="搜索......" placeholder-class="placeholder" />
			</view>
			<button type="default">搜索</button>
		</view>
		<!-- 滑块-->
		<scroll-view class="navcroll" scroll-x="true" v-if="indexData.kingKongModule" enable-flex>
			<view class="navItem" :class="{ active: navIndex === -1 }" @click="changeIndex(-1,-1)">推荐</view>
			<view
				class="navItem"
				:class="{ active: navIndex === index }"
				@click="changeIndex(index,item.L1Id)"
				v-for="(item, index) in indexData.kingKongModule.kingKongList"
				:key="item.L1Id"
			>
				{{ item.text }}
			</view>
		</scroll-view>
		<!-- 内容区 -->
		<scroll-view scroll-y="true">
			<!-- 推荐模块跟其它模块互斥关系  v-if -->
			<Recommend v-if="navIndex === -1"></Recommend>
			<CateList v-else :L1Id="L1Id"></CateList>
		</scroll-view>
	</view>
</template>

<script>
import request from '../../utils/request.js';
import Recommend from '../../components/Recommend/Recommend.vue';
import CateList from '../../components/CateList/CateList.vue';
//vuex
import { mapActions, mapState } from 'vuex';
export default {
	components: {
		Recommend,
		CateList
	},
	data() {
		return {
			//indexData: {}, //首页数据  调整到vuex仓库中去
			navIndex: -1, //点谁谁高亮，导航的标记
			L1Id: -1   //将此主页面参数，传递到子页面中
		};
	},
	computed: {
		//2.触发仓库action方法二使用mapActions  mapState('模块',['数据']) 此写法常用
		...mapState('home', ['indexData'])
		//2.触发仓库action方法二使用mapActions  mapState({对象：仓库的值})  写法2也可以
		// ...mapState({
		// 	indexData:state=>state.home.indexData
		// })
	},
	onLoad() {},
	mounted() {},
	created() {
		//获取仓库里的数据
		console.log(this.$store.state.home.text);
		//1.触发仓库action方法一使用dispatch:    this.$store.dispatch('模块名/action名')
		//this.$store.dispatch('home/getIndexDataActions');
		//2.触发仓库action方法二使用mapActions
		this.getIndexDataActions();
		//this.getIndexData();
	},
	methods: {
		...mapActions('home', ['getIndexDataActions']), //2、触发仓库action 方法二使用模板方法mapActions,将仓库的方法注册到当前页后直接使用
		//获取首页数据:不适用vuex 最传统方式
		async getIndexData() {
			const res = await request('/getIndexData'); //小程序 没有跨域问题
			//const res=await request('/api/getIndexData');  //H5 模式下请求解决跨域时，需要增加/api
			console.log(res);
			this.indexData = res.indexData;
		},
		//点击切换下标
		changeIndex(index,L1Id) {
			this.navIndex = index;
			this.L1Id = L1Id;
		}
	}
};
</script>

<style lang="stylus">
.indexContainer
	.header
		display: flex
		padding 10rpx 5rpx
		.logo
			width: 140rpx
			height: 40rpx
			margin: 10rpx
		.search
			width: 420rpx
			height: 60rpx
			background: #f5f5f5
			position: relative
			input
				width: 360rpx
				height: 60rpx
				margin-left: 60rpx
				.placeholder
					font-size: 26rpx
					color: #333
			.iconfont
				position: absolute
				font-size: 40rpx
				left: 10rpx
				top: 10rpx
		button
			width: 144rpx
			height: 60rpx
			font-size: 26rpx
			padding: 0 4rpx
			line-height: 60rpx
			text-align: center

	.navcroll
		display: flex
		//不换行
		white-space: nowrap
		.navItem
			display: inline-block
			height: 40rpx
			padding: 10rpx
			font-size: 26rpx
			&.active
				color:#BB2C08
				border-bottom: 3rpx solid #BB2C08

	.aaa
		color: red
</style>
